<template>
    <view class="modal" :class="{ show: showModal }" @touchmove.stop.prevent>
        <view class="modal-mask" @click="closeClick"></view>
        <view class="modal-dialog">
            <view class="modal-header">
                <view class="modal-title">{{title}}</view>
                <view class="modal-close" @click="closeClick">
                    <uni-icons type="closeempty" color="#999" size="20"></uni-icons>
                </view>
            </view>
            <view class="modal-body">
                <slot></slot>
            </view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '提示'
    }
})

const emits = defineEmits(['update:showModal', 'close'])

const closeClick = () => {
    emits('update:showModal', false)
    emits('close')
}
</script>

<style lang="scss">
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    &.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    position: relative;
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    transform: scale(0.9);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
}

.modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
    padding-right: 40rpx;
}

.modal-close {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    z-index: 1;
    padding: 10rpx;
}

.modal-body {
    padding: 30rpx;
    max-height: 60vh;
    overflow-y: auto;
}
</style>
